<template>
  <div class="source-drawer">
    <el-drawer
      ref="drawer"
      :visible="visible"
      @update:visible='cancel'
      :with-header="false"
      direction="rtl"
      size="40%"
      custom-class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <el-form
          ref="branchForm"
          :model="branchForm"
          :rules="rules"
          label-width="100px"
        >
          <el-row>
            <el-col :span="18">
              <el-form-item
                label="节点名称"
                prop="name"
              >
                <el-input v-model="branchForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider></el-divider>
          <el-row
            v-for="(branch,index) in branchForm.branchList"
            :key="branch.id"
            :gutter="20"
            class="margin_b_24"
          >
            <el-col :span="10">
              <el-form-item
                label="节点名称"
                prop="name"
              >
                <el-input v-model="branch.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="子节点名称"
                :prop="'branchList.'+index+'.rate'"
                :rules="branchGroupRules.branchGroupRate"
              >
                <span class="interval">
                  <el-input-number
                    v-model="branch.rate"
                    :controls="false"
                    :max="100"
                    :precision="0"
                    :min="0"
                    @change="((val)=>{numChange(val,index)})"
                  ></el-input-number>
                  <span class="percent_right">%</span>
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button
                v-show="branchForm.branchList.length>2"
                type="primary"
                @click="deleteBranch(index)"
              >
                删除分支
              </el-button>
            </el-col>
          </el-row>
          <el-row
            type="flex"
            justify="center"
          >
            <el-col :span="6">
              <el-button
                v-show="branchForm.branchList.length<10"
                type="primary"
                class="add_branch"
                @click="addBranch()"
              >
                添加分支
              </el-button>
            </el-col>
          </el-row>
          <div class="demo-drawer__footer">
            <div class="demo-drawer__footer">
              <el-row
                type="flex"
                justify="center"
              >
                <el-col :span="4">
                  <el-button @click="cancel">取 消</el-button>
                </el-col>
                <el-col :span="4">
                  <el-button
                    type="primary"
                    @click="save"
                  >确 定</el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form>

      </div>
    </el-drawer>
  </div>
</template>
<script>
import { commonMixin } from './common-mixin'
import { branchMixin } from './branch-mixin'
export default {
  mixins: [commonMixin, branchMixin],
  data() {
    return {
      branchGroupRules: {
        branchGroupRate: [{ required: true, message: '请输入比例', trigger: 'blur' }]
      }
    }
  },
  methods: {
    numChange(val, index) {
      this.$set(this.branchForm.branchList[index], 'name', `${val}%`)
    }
  }
};
</script>
 <style lang="scss" scoped>
.interval {
  position: relative;
  display: inline-block;
  .percent_right {
    position: absolute;
    border-radius: 0 4px 4px 0;
    z-index: 1;
    top: 1px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #f5f7fa;
    color: #606266;
    cursor: pointer;
    left: 97px;
    width: 32px;
    font-size: 13px;
  }
}
.margin_b_24 {
  margin-bottom: 24px;
}
.add_branch {
  margin: 24px 0;
}
::v-deep {
  .el-drawer__body {
    overflow: scroll;
  }
  .el-divider--horizontal {
    margin: 0 0 24px;
  }
  .el-drawer__header {
    border-top: 1px solid #dce3e8;
    border-bottom: 1px solid #dce3e8;
    background: #f1f3f4;
    padding: 5px 10px;
    margin-bottom: 1rem;
    font-size: 18px;
  }
  .el-drawer {
    border-left: 1px solid rgb(220, 227, 232);
    background-color: rgb(251, 251, 251);
  }
  .demo-drawer__content {
    padding: 20px;
  }
}
</style>
